<template>
	<view class="repair">
		<image src="../../static/creatbg.png" mode="" class="creatBg"></image>
		<view class="repair_main">
			<view class="repair-m">
				<view class="repair-m-f">
					<view class="repair-m-f-n">
						客户
					</view>
					<view class="repair-m-f-i">
						<xfl-select :list="list3" :clearable="false" :showItemNum="5" :listShow="false"
							:isCanInput="false" :focusShowList="true"
							:style_Container="'height: 50rpx; font-size: 16px;width:350rpx'" :placeholder="'请选择'"
							:selectHideType="'hideAll'" @change='doctorEven()'>
						</xfl-select>
					</view>
				</view>
				<view class="repair-m-f">
					<view class="repair-m-f-n">
						科室
					</view>
					<view class="repair-m-f-i">
						<!-- <input type="text" v-model="product"
							placeholder-style="font-size:28rpx;line-height:34rpx;color:#B6BDBD;" placeholder="请输入设备名称"
							value="" /> -->
						<xfl-select :list="list" :clearable="false" :showItemNum="5" :listShow="false"
							:isCanInput="false" :focusShowList="true"
							:style_Container="'height: 50rpx; font-size: 16px;width:350rpx'" :placeholder="'请选择'"
							:selectHideType="'hideAll'" @change='departmentEven()'>
						</xfl-select>
					</view>
				</view>
				<view class="repair-m-f">
					<view class="repair-m-f-n">
						型号
					</view>
					<view class="repair-m-f-i">
						<!-- <input type="text" v-model="product"
							placeholder-style="font-size:28rpx;line-height:34rpx;color:#B6BDBD;" placeholder="请输入设备名称"
							value="" /> -->
						<xfl-select :list="list1" :clearable="false" :showItemNum="5" :listShow="false"
							:isCanInput="false" :focusShowList="true"
							:style_Container="'height: 44rpx; font-size: 16px;width:350rpx'" :placeholder="'请选择'"
							:selectHideType="'hideAll'" @change='equipmentEven()'>
						</xfl-select>
					</view>
				</view>
				<view class="repair-m-f">
					<view class="repair-m-f-n">
						软件版本
					</view>
					<view class="repair-m-f-i">
						<!-- <input type="text" v-model="like"
							placeholder-style="font-size:28rpx;line-height:34rpx;color:#B6BDBD;" placeholder="选填"
							value="" /> -->
						{{equipmentData.software_version||'未更新'}}
					</view>
				</view>
				<view class="repair-m-f">
					<view class="repair-m-f-n">
						附件
					</view>
					<view class="repair-m-f-i">
						<!-- <input type="text" v-model="software_version"
							placeholder-style="font-size:28rpx;line-height:34rpx;color:#B6BDBD;" placeholder="选填"
							value="" /> -->
						{{equipmentData.enclosure||'未更新'}}
					</view>
				</view>
			</view>

			<view class="repair-m">
				<view class="repair-m-n">
					<view class="repair-left" />
					联系人信息
				</view>
				<view class="repair-mes">
					<view class="repair-mes_t">
						联系人
					</view>
					<view class="repair-mes_b">
						<input type="text" v-model="contacts"
							placeholder-style="font-size:28rpx;line-height:50rpx;color:#B6BDBD;" placeholder="请输入内容" />
					</view>
				</view>
				<view class="repair-mes">
					<view class="repair-mes_t">
						联系电话
					</view>
					<view class="repair-mes_b">
						<input type="number" v-model="mobile"
							placeholder-style="font-size:28rpx;line-height:50rpx;color:#B6BDBD;" placeholder="请输入内容" />
					</view>
				</view>
				<view class="repair-mes">
					<view class="repair-mes_t">
						预约时间
					</view>
					<view class="repair-mes_b">
						<picker mode="date" :value="yuyue_time" @change="bindDateChange">
							<view class="uni-input">{{yuyue_time || '请选择'}}</view>
						</picker>
						<image src="../../static/arrow.png" class="arrow" mode=""></image>
					</view>
				</view>
				<view class="repair-mes">
					<view class="repair-mes_t">
						设备故障描述
					</view>
					<view class="repair-mes_b">
						<textarea v-model="describe"
							placeholder-style="font-size:28rpx;line-height:50rpx;color:#B6BDBD;width:700rpx;"
							style="height:160rpx" placeholder="请输入内容" />
					</view>
				</view>
				<view class="repair-mes">
					<view class="repair-mes_t">
						图片上传
					</view>
					<view class="repair-img">
						<view class="repair-w-q-i-a" v-for="(item,index) in imgs_list" :key='index'>
							<image src="../../static/delect.png" mode="" class="del_img" @tap="del(index)"></image>
							<image :src="item" mode="" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="repair-w-q-i-c" @tap="upImgs">
							<image src="../../static/add.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="submit" @tap="btnJump">
			提交
		</view>

	</view>
</template>

<script>
	import xflSelect from '../../components/xfl-select/xfl-select.vue';
	export default {
		components: {
			xflSelect
		}, //注册为子组件
		data() {
			return {
				yuyue_time: "",
				departmentList: [], //科室列表
				list: [],
				list3: [],
				hospital_id: null,
				department_id: null,
				equipmentList: [], //设备列表
				list1: [],
				equipment_id: null, //设备id
				imgs_list: [], // 附件图片
				equipmentData: {}, //设备信息
				describe: '', //问题描述
				contacts: '', //联系人,
				mobile: '', //手机号
				requestStatus: false,
				hospitalList: []
			}
		},
		watch: {},
		onLoad() {
			this.getHospital()
		},
		methods: {
			bindDateChange(e) {
				this.yuyue_time = e.detail.value;
			},
			getHospital() {
				this.$https.post('/hospital/getHospitalList').then(res => {
					if (res.code == 1) {
						this.hospitalList = res.data
						this.hospitalList.forEach(item => {
							this.list3.push(item.name)
						})
					}
				})
			},
			/* 获取科室列表 */
			getDepartment(id) {
				this.$https.post('/phase/getDepartment', {
					hospital_id: id
				}).then(res => {
					this.departmentList = res.data
					this.departmentList.forEach(item => {
						this.list.push(item.name)
					})
				})
			},
			/* 获取设备列表 */
			getEquipmentList(id) {
				this.$https.post('/phase/getEquipmentList', {
					department_id: id
				}).then(res => {
					this.equipmentList = res.data
					this.equipmentList.forEach(item => {
						if (item.serial) {
							this.list1.push(`${item.name}-${item.serial}`)
						} else {
							this.list1.push(`${item.name}`)
						}


					})
				})
			},
			/* 选择客户 */
			doctorEven(e) {
				this.list = []
				this.list1 = []
				this.equipment_id = null
				this.equipmentData = {}
				this.$children[1].onClear()
				let de_data = this.hospitalList.find(item => {
					return item.name == e.newVal
				})
				this.hospital_id = de_data.id
				// console.log(de_data,'4444444')
				this.getDepartment(this.hospital_id)
			},
			/* 科室事件 */
			departmentEven(e) {
				this.list1 = []
				this.equipment_id = null
				this.equipmentData = {}
				this.$children[2].onClear()
				let de_data = this.departmentList.find(item => {
					return item.name == e.newVal
				})
				this.department_id = de_data.id
				this.getEquipmentList(this.department_id)
			},
			/* 设备事件 获取设备详情 */
			equipmentEven(e) {
				let de_data = this.equipmentList.find(item => {
					return `${item.name}-${item.serial}` == e.newVal
				})
				console.log(de_data,'de_data---------,')
				this.equipment_id = de_data.id
				this.getEquipmentDetails(this.equipment_id)
			},
			/* 获取设备信息 */
			getEquipmentDetails(id) {
				this.$https.post('/phase/getEquipment', {
					id: id
				}).then(res => {
					this.equipmentData = res.data
				})
			},
			/* 删除照片 */
			del(i) {
				this.imgs_list.splice(i, 1)
			},
			//防抖
			debounce(fn, delay) {
				var timer = null;
				return function() {
					var context = this;
					var args = arguments;
					clearTimeout(timer);
					timer = setTimeout(function() {
						fn.apply(context, args);
					}, delay);
				};
			},
			/* 创建工单 */
			btnJump() {
				if (this.requestStatus) {
					// 利用 return 终止函数继续运行
					return false;
				}
				var reg_user = /^[\u4e00-\u9fa5]{2,4}$/; //2-4个中文字符正则
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //11位手机号码正则
				if (!reg_user.test(this.contacts) || !reg_tel.test(this.mobile)) {
					uni.showToast({
						title: "请正确输入手机号或者姓名",
						icon: "none",
						duration: 1500
					})
				} else {
					let images = this.imgs_list.toString(',') //图片字符串格式
					let params = {
						describe: this.describe,
						contacts: this.contacts,
						mobile: this.mobile,
						hospital_id: this.hospital_id,
						department_id: this.department_id,
						images: images,
						equipment_id: this.equipment_id,
						yuyue_time: this.yuyue_time
					}
					this.$https.post('/warranty/add', params).then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					})
				}
				this.requestStatus = true;
				setTimeout(() => {
					this.requestStatus = false;
				}, 1000);




			},
			/* 图片上传 */
			upImgs() {
				const token = uni.getStorageSync('userInfo').token

				uni.chooseImage({
					count: 2, // 最多可以选择的图片张数，默认9
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
					success: res => {
						/* 	this.imgs_list = res.tempFilePaths */
						res.tempFilePaths.forEach(item => {
							uni.uploadFile({

								url: 'https://ylsb.cqjjyl.com/api/common/upload', //仅为示例，非真实的接口地址
								filePath: item,
								name: 'file',
								formData: {
									token: token // 上传附带参数
								},
								success: (res1) => {
									console.log(res1);
									if (res1.data.code == 0) {
										uni.showToast({
											title: res1.data.msg,
											duration: 1500,
											icon: 'error'
										})
									} else {
										let img = JSON.parse(res1.data).data.fullurl

										this.imgs_list.push(img)
									}

								},
								fail: res3 => {
									uni.showToast({
										title: '上传失败',
										duration: 1500,
										icon: 'error'
									})
								}
							});
						})
					},
					fail: (res) => {
						uni.showToast({
							title: '上传失败',
							duration: 1500,
							icon: 'error'
						})
					}
				})
			},

		},

	}
</script>

<style lang="scss" scoped>
	.uni-input {
		font-size: 28rpx;
		line-height: 50rpx;
		width: 600rpx;
		color: #B6BDBD;
	}

	.submit {
		width: 622rpx;
		height: 80rpx;
		border-radius: 80rpx;
		background-color: $public-oclor;
		line-height: 80rpx;
		text-align: center;
		color: #FFFFFF;
		margin: 30rpx auto;
		position: fixed;
		bottom: 1%;
		left: 7.5%;
	}

	.repair {
		background-color: #F5F6F8;
		min-height: 130vh;

		.repair_main {
			margin: 20rpx;
			position: absolute;
			top: 9%;
			width: 94%;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
		}

		.creatBg {
			width: 100%;
			height: 210rpx;

		}

		&-w {

			&-q {
				padding: 58rpx 32rpx;

				&-p {
					font-size: 28rpx;
					color: #B6BDBD;
					line-height: 33rpx;
					margin-top: 40rpx;
				}

				&-i {
					display: flex;
					padding: 40rpx 0;
					flex-wrap: wrap;

					&-a {
						width: 154rpx;
						height: 154rpx;
						background: #F5F6F8;
						margin-right: 18rpx;
						margin-bottom: 18rpx;
						border-radius: 4rpx;
						overflow: hidden;
						position: relative;

						.del_img {
							position: absolute;
							left: 0;
							bottom: 0;
							width: 154rpx;
							height: 34rpx;
						}
					}

					&-a:nth-child(4) {
						margin-right: 0rpx;
					}


					&-b {
						width: 154rpx;
						height: 154rpx;
						background: #F5F6F8;
						margin: 0 16rpx;
						margin-right: 18rpx;
						margin-bottom: 18rpx;
					}

					&-c {
						width: 154rpx;
						height: 154rpx;
						background: #F5F6F8;
						position: relative;
						margin-right: 18rpx;
						margin-bottom: 18rpx;

						image {
							width: 32rpx;
							height: 32rpx;
							position: absolute;
							left: 50%;
							top: 50%;
							margin-top: -15rpx;
							margin-left: -15rpx;

						}
					}
				}


				&-t {
					border-bottom: 2rpx solid #f6f7fb;

					textarea {
						width: 100%;
					}
				}
			}

			&-n {
				padding: 20rpx 12rpx;
				background: linear-gradient(91deg, #e2ecfb 0%, rgba(255, 255, 255, 0) 100%);
				font-size: 28rpx;
				font-weight: 600;
				color: #6AA6FA;
				line-height: 33rpx;
			}
		}

		&-img {
			background-color: #fff;
			font-size: 28rpx;
			font-weight: 500;
			color: #3B3D3D;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}

		&-mes {
			margin: 0 10rpx;
			padding: 20rpx 10rpx 6rpx;

			&_t {
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 14rpx;
				color: #3B3D3D;
				line-height: 33rpx;
			}

			&_b {
				background-color: #F5F6F8;
				font-size: 28rpx;
				font-weight: 500;
				color: #3B3D3D;
				padding: 14rpx 20rpx;
				line-height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.arrow {
					width: 16rpx;
					height: 26rpx;
				}
			}
		}

		&-m {
			// border-bottom: 20rpx solid #f6f7fb;


			&-n {
				padding: 20rpx 0rpx;
				// background: linear-gradient(86deg, rgba(226, 140, 129, 0.15) 0%, rgba(226, 140, 129, 0) 100%);
				font-size: 32rpx;
				font-weight: 600;
				color: #434343;
				line-height: 33rpx;
				display: flex;
				align-items: center;

				.repair-left {
					width: 10rpx;
					height: 40rpx;
					margin-right: 10rpx;
					background-color: #1A66FF;
				}
			}

			&-f {
				margin: 0 25rpx;
				padding: 32rpx 0;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #f6f7fb;
				align-items: center;

				&-n {
					font-size: 28rpx;
					font-weight: 500;
					color: #3B3D3D;
					line-height: 33rpx;
				}

				&-i {
					font-size: 28rpx;
					font-weight: 500;
					color: #3B3D3D;
					line-height: 33rpx;
				}
			}
		}
	}
</style>